<template>
 <div style="height: calc(100% - 100px)" class="white-bg">
   <!-- 课程 & 知识专题 & 学习地图 -->
    <div class="course-container" v-if="item.mark === 'COURSE' || item.mark === 'SUBJECT' || item.mark === 'MAP'">
       <div class="course-img">
         <van-image style="width: 100px;height: 80px" :src="this.appUrl + item.imageUrl"></van-image>
       </div>
       <div class="course-desc">
         <h4 v-html="ruleTitle(item.title)"></h4> <!--名称-->
         <p class="desc" v-html="ruleTitle(item.content)"></p> <!--简介-->
         <div class="desc-time">
           <p>{{item.itmTrianForm === 3 ? $t('certified_courses') : courseType[item.type]}}</p> <!--类型-->
           <p>{{ item.createTime | formTime('splitTime') }}</p> <!--时间-->
         </div>
       </div>
    </div>
   <!-- 问答 -->
    <div class="question-container" v-if="item.mark === 'QUESTION'">
      <h4 v-html="ruleTitle(item.title)"></h4>
      <div class="question-desc">
          <p>{{$t('know_que_desc')}}:</p>
          <div v-html="htmlHeightLight(item.content)"></div>
      </div>
      <div class="question-time">
        <div class="question-person">
          <p>{{$t('personal_my_data_person')}}：</p>
          <p v-html="ruleTitle(item.usrNickName)"></p>
        </div>
        <p>{{$t('personal_my_data_answer')}}：{{item.number}}</p>
        <p>{{ item.createTime | formTime('splitTime') }}</p>
      </div>
    </div>
   <!-- 知识库 -->
   <div class="knowledge-container" v-if="item.mark === 'KNOWLEDGE'">
     <div class="knowledge-title">
       <van-icon name="records" size="30" color="#c9c9c9"/>
       <p v-html="ruleTitle(item.title)"></p>
     </div>
     <div class="knowledge-time">
       <div class="knowledge-person">
         <span>{{$t('personal_my_data_person')}}：</span>
         <span v-html="ruleTitle(item.usrNickName)"></span>
       </div>
       <p>{{$t('personal_my_data_throw')}}：{{item.number}}</p>
       <p>{{ item.createTime | formTime('splitTime') }}</p>
     </div>
   </div>
   <!-- 人员 -->
   <div class="user-container" v-if="item.mark === 'USER'">
     <van-image
             round
             width="70px"
             height="70px"
             :src="this.appUrl + item.imageUrl"
     />
     <div class="user-desc">
        <h4 v-html="ruleTitle(item.title)"></h4>
        <div class="user-dept">
          <span>{{($t('department'))}}：</span>
          <span v-html="ruleTitle(item.content)"></span>
        </div>
        <div class="user-time">
          <p>{{($t('credits_point'))}}：{{item.number}}</p>
          <p>{{ item.createTime | formTime('splitTime') }}</p>
        </div>
     </div>
   </div>
   <!-- 工作圈 -->
    <div class="course-container" v-if="item.mark === 'WORK'">
       <div class="course-img">
         <van-image style="width: 100px;height: 80px" :src="this.appUrl + item.imageUrl"></van-image>
       </div>
       <div class="course-desc">
         <h4 v-html="ruleTitle(item.title)"></h4> <!--名称-->
         <p class="desc" v-html="ruleTitle(item.content)"></p> <!--简介-->
         <div class="desc-time">
           <p>{{$t('Circle_Leader')}}: {{ item.usrDisplayBil }}</p> <!-- 圈主-->
           <p>{{$t('group_doing')}}: {{item.number}}</p> <!--动态-->
         </div>
       </div>
    </div>
 </div>
</template >

<script>
import {Image, Icon} from 'vant';
import mixin from '@/components/mixin/Mixin.js';
export default {
    name: 'SearchItem',
    props: {
        // 搜索内容
        searchValue: {
            type: String,
            default: ''
        },
        item: {}
    },
    mixins: [mixin],
    components: {
        [Image.name]: Image,
        [Icon.name]: Icon
    },
    computed: {
        ruleTitle() {
            return (title) => {
                if (!title) {
                    return '';
                }
                if (this.searchValue && this.searchValue.length > 0) {
                    // 匹配关键字正则
                    const replaceReg = new RegExp(this.searchValue, 'g');
                    // 高亮替换v-html值
                    const replaceString =
                        '<span style="color: #075ebb;">' + this.searchValue + '</span>';
                    // 开始替换
                    title = title.replace(replaceReg, replaceString);
                }
                return title;
            };
        },
        htmlHeightLight() {
            return (val) => {
                const div = document.createElement('div');
                div.innerHTML = val;
                if (div.innerText.indexOf(this.searchValue) !== -1 && val !== '') {
                    div.innerText = div.innerText.replace(new RegExp(this.searchValue, 'g'), '<span style="color: #075ebb;">' + this.searchValue + '</span>');
                    const html = div.innerHTML.replace(new RegExp('&lt;', 'g'), '<').replace(new RegExp('&gt;', 'g'), '>');
                    return html;
                } else {
                    return val;
                }
            };
        }
    }
};
</script>

<style scoped lang="less">
  /deep/.course-container{
    display: flex;
    padding: 5px 10px;
    height: 100%;
    border-bottom: 1px #c9c9c9 solid;
    .course-img{
      width: 35%;
      padding: 5px 10px 5px 0;
    }
    .course-desc{
      display: flex;
      width: 65%;
      flex-direction: column;
      padding: 5px 0;
      .desc{
        overflow: hidden;
        white-space: nowrap;
        padding: 15px 0;
        color: #c9c9c9;
        font-size: 12px;
        text-overflow: ellipsis;
      }
      .desc-time{
        display: flex;
        justify-content: space-between;
        >p{
          color: #c9c9c9;
          font-size: 12px;
        }
      }
      img{
        width: 100%;
      }
    }
  }
  .user-container{
    display: flex;
    padding: 10px;
    border-bottom: 1px #c9c9c9 solid;
    .user-desc{
      display: flex;
      flex-direction: column;
      width: 65%;
      padding: 0 20px;
      .user-dept{
        color: #c9c9c9;
        font-size: 12px;
        padding: 10px 0;
      }
      .user-time{
        display: flex;
        justify-content: space-between;
        >p{
          color: #c9c9c9;
          font-size: 12px;
        }
      }
    }
  }
  .question-container{
    display: flex;
    flex-direction: column;
    padding: 15px 10px;
    border-bottom: 1px #c9c9c9 solid;
    .question-desc{
      padding: 10px 0;
      /deep/ img, video {
        max-width: 60%;
        height: auto;
      }
      >p{
        color: #c9c9c9;
        font-size: 14px;
        padding-bottom: 8px;
        text-align: left;
      }
      >div{
        overflow : hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
      }
    }
    .question-time{
      display: flex;
      justify-content: space-between;
      >p{
        color: #c9c9c9;
        line-height: 10px;
        font-size: 14px;
      }
      .question-person{
        display: flex;
        >p{
          color: #c9c9c9;
          line-height: 10px;
          font-size: 14px;
        }
      }
    }
  }
  .knowledge-container{
    padding: 10px;
    border-bottom: 1px #c9c9c9 solid;
    .knowledge-title{
      display: flex;
      >p{
        padding-top: 8px;
      }
    }
    .knowledge-time{
      display: flex;
      justify-content: space-between;
      padding: 10px 0;
      line-height: 10px;
      >p{
        color: #c9c9c9;
        font-size: 14px;
      }
      .knowledge-person{
        display: flex;
        color: #c9c9c9;
        font-size: 14px
      }
    }
  }
</style>
